<!--
 * @FileDescription 分类菜单
 * @Author lz
 * @Date 20230313 16:01:56
 * @LastEditors lz
 * @LastEditTime 20230313 16:01:56
-->
<template>
    <div class="CatWp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="1" :ID="0"></hdrModel>
        <div class="moduleBox">
            <div class="moduleCla" @click="SelectProject(item.Module)"
                v-for="(item, index) in HomeContent.Default.ParallelDriving.value.mode" :key="index">
                <div class="lab_1" v-if="item.Module == '遥控驾驶'"></div>
                <div class="lab_1_1" v-if="item.Module == '遥控驾驶' && state.SelectedId == '遥控驾驶'"></div>
                <div class="lab_2" v-if="item.Module == '远程驾驶'"></div>
                <div class="lab_2_1" v-if="item.Module == '远程驾驶' && state.SelectedId == '远程驾驶'"></div>
                <div class="lab_3" v-if="item.Module == '循迹驾驶'"></div>
                <div class="lab_3_1" v-if="item.Module == '循迹驾驶' && state.SelectedId == '循迹驾驶'"></div>
                <div class="lab_4" v-if="item.Module == '无人驾驶'"></div>
                <div class="lab_4_1" v-if="item.Module == '无人驾驶' && state.SelectedId == '无人驾驶'"></div>
            </div>
        </div>
        <div class="beginBtn" @click="handleClick()">
            开始实训
        </div>
    </div>
</template>

<script setup lang="ts">
import hdrModel from '../header/index.vue'
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, watch } from 'vue'
import { useRouter } from 'vue-router'
import HomeContent from '../HomeContent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
const router = useRouter()
const state = reactive({
    SelectedId: '',
    ProjectType: '',
});
function SelectProject(val: any) {
    state.SelectedId = val
    state.ProjectType = val
}
async function handleClick() {
    let val = state.ProjectType
    if (val == '') {
        return
    } else if (val != '') {
        let newData: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithDriveModeRequest(val))
        console.log('newData',newData);
        HomeContent.Default.MenuList.value = newData
        HomeContent.Default.TypeStatus.value = true
        console.log('val',val);

        HomeContent.Default.ProgressText.value = '数据资源初始化'
        HomeContent.Default.ProgressVal.value = 90

        HomeContent.Default.Loaded.value = true
        if (val == '遥控驾驶') {
            await router.push('MenuIndex')
        } else if (val == '循迹驾驶') {
            await router.push('TrackMenu')
        } else if (val == '远程驾驶') {
            await router.push('PracticalDriving')
        } else if (val == '无人驾驶') {
            await router.push('Driverless')
        }
    }
}

</script>

<style scoped>
.CatWp {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url('/colImages/b.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.moduleBox {
    margin-top: 200px;
    width: 100%;
    /* display: flex;
    justify-content: space-around; */
}

.module {
    text-align: center;
    width: 319px;
    height: 511px;
    line-height: 511px;
    font-size: 32px;
    color: #fff;
    font-family: PangMenZhengDao;
    background-image: url('/images/sensornIformation_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.module:hover {
    color: rgb(90, 244, 255);
}

.chick {
    color: rgb(90, 244, 255);
}

.beginBtn {
    width: 162px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    color: #fff;
    font-size: 28px;
    font-family: YouSheBiaoTiHei;
    background-image: url('/images/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 23px;
    transform: translate(-50%, 0);
}

.beginBtn:hover {
    background-image: url('/images/btn_bg_select.png');
    color: rgb(90, 244, 255);
}

.lab_1 {
    width: 313px;
    height: 598px;
    position: absolute;
    left: 186px;
    top: 234px;
    background-image: url('/colImages/ycjs.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_1_1 {
    width: 313px;
    height: 598px;
    position: absolute;
    left: 186px;
    top: 234px;
    background-image: url('/colImages/ykjs1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_1:hover {
    background-image: url('/colImages/ykjs1.png');
}

.lab_2 {
    width: 313px;
    height: 598px;
    position: absolute;
    left: 592px;
    top: 176px;
    background-image: url('/colImages/pxjs.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_2_1 {
    width: 313px;
    height: 598px;
    position: absolute;
    left: 592px;
    top: 176px;
    background-image: url('/colImages/pxjs1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_2:hover {
    background-image: url('/colImages/pxjs1.png');
}

.lab_3 {
    width: 313px;
    height: 598px;
    position: absolute;
    right: 610px;
    top: 176px;
    background-image: url('/colImages/xhjs.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_3_1 {
    width: 313px;
    height: 598px;
    position: absolute;
    right: 610px;
    top: 176px;
    background-image: url('/colImages/xhjs1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_3:hover {
    background-image: url('/colImages/xhjs1.png');
}

.lab_4 {
    width: 313px;
    height: 598px;
    position: absolute;
    right: 200px;
    top: 230px;
    background-image: url('/colImages/wrjs.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_4_1 {
    width: 313px;
    height: 598px;
    position: absolute;
    right: 200px;
    top: 230px;
    background-image: url('/colImages/wrjs1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.lab_4:hover {
    background-image: url('/colImages/wrjs1.png');
}
</style>